<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./icon/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./swiper/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./less/css/index.css" />
    <title>Document</title>
    <script src="./vue/js/vue.js"></script>
    <script src="./axios/axios.js"></script>
</head>
<body>
    <div id="index_box1" class="container">
        <!-- 头部搜索框 -->
        <form class="form-horizontal" role="form">
            <div class="index_box_div">
                <div class="index_box_div_top">
                <div class="input-group">
                    <span class="input-group-addon"  @click="searchFor">
                        <span class="icon iconfont">&#x10100;</span>
                    </span>
                    <input v-model="seachText" type="text" class="form-control" placeholder="搜索车型">
                </div>
                </div>
                <div class="index_box_div_bottom">
                    <span class="icon iconfont icon-xiaoxi"></span>
                </div>
            </div>
        </form>
    </div>
    <div id="index_box2" class="col-xs-12 container text-center">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                <img rel="prefetch" src="images/lunbo_01.png" />
                </div>
                <div class="swiper-slide">
                <img rel="prefetch" src="images/lunbo_01.png" />
                </div>
                <div class="swiper-slide">
                <img rel="prefetch" src="images/lunbo_01.png" />
                </div>
                <div class="swiper-slide">
                <img rel="prefetch" src="images/lunbo_01.png" />
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div id="index_box3">
        <div class="index_box3_box_content">
            <div class="iconbox text-center" onclick="backForByIcon('二手车')">
                <div class="iconbox_icon1">
                    <span class="icon iconfont icon-ershouche"></span>
                </div>
                <div class="tc text-center">二手车</div>
            </div>
            <div class="iconbox text-center" >
                <div class="iconbox_icon2">
                    <span class="icon iconfont icon-maiche"></span>
                </div>
                <div class="tc text-center">新车</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon3">
                    <span class="icon iconfont icon-jisuanqi"></span>
                </div>
                <div class="tc text-center">零首付</div>
            </div>
            <div class="iconbox text-center" >
                <div class="iconbox_icon4">
                    <span class="icon iconfont icon-yinhangka"></span>
                </div>
                <div class="tc text-center">分期申请</div>
            </div>
            <div class="iconbox text-center" onclick="backForByIcon('估价')">
                <div class="iconbox_icon5">
                    <span class="icon iconfont icon-zhinenggujia"></span>
                </div>
                <div class="tc text-center">估价</div>
            </div>
        </div>
    </div>
    <div id="index_box3">
        <div class="index_box3_box_content">
            <div class="iconbox text-center">
                <div class="iconbox_icon6">
                    <span class="icon iconfont icon-maiche1"></span>
                </div>
                <div class="tc text-center">报价卖车</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon7">
                    <span class="icon iconfont icon-rexiao"></span>
                </div>
                <div class="tc text-center">热销排行</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon8">
                    <span class="icon iconfont icon-jiangjia"></span>
                </div>
                <div class="tc text-center" >降价急售</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon9">
                    <span class="icon iconfont icon-baike"></span>
                </div>
                <div class="tc text-center" >汽车百科</div>
            </div>
            <div class="iconbox text-center">
                <div class="iconbox_icon10">
                    <span class="icon iconfont icon-qicheyanghu"></span>
                </div>
                <div class="tc text-center" >汽车保养</div>
            </div>
        </div>
    </div>
    <div id="index_box4"></div>
    <div id="index_box5" class="container">
        <div class="col-xs-6 index_box5_pig_01"> 
            <b>新车抢先看</b>
            <span>每周更新</span>
            <img rel="prefetch" src="images/car1_03.png">
        </div>
        <div class="col-xs-6 index_box5_pig_02">
            <b>热销SUV</b>
            <span>年轻有底气</span>
            <img rel="prefetch" src="images/car2_03.png">
        </div>
        <div class="col-xs-6 index_box5_pig_03">
            <b>捡漏二手</b>
            <span>新手首选</span>
            <img rel="prefetch" src="images/car3_03.png">
        </div>
    </div>
    <div id="index_box6"></div>
    <div id="index_box7" class="row">
        <div class="container">
            <div class="col-xs-4">
                <b>热销车型</b>   
            </div>
            <div class="col-xs-4 col-xs-offset-4 box7_bottom">查看全部 &gt;</div>
        </div>
    </div>
    <div id="index_box8" class="container">
        <div v-for="item,index in carArrays" :key="item.puid" class="index_box8_content" @click="backToCarDetails(item.puid)">
            <img rel="prefetch" :src="item.thumb_img" />
            <h4><b>{{item.title}}</b></h4>
            <span class="index_box8_span1">
                销售分
                <span>{{item.carCount}}</span>
            </span>
            <span class="index_box8_span2 gzfont" v-html="'指导价：'+item.carCNY">指导价：</span>
            <div class="index_box8_div1" v-show="index<3">{{'0'+(index+1)}}</div>
        </div>
    </div>
    <div id="index_box9">
        <div class="index_box9_content">
            <div style="color:#249FF4" class="box text-center" @click="jump('首页')">
                <span class="icon iconfont icon-shouye"></span>
                <div class="text-center" >首页</div>
            </div>
            <div class="box text-center" @click="jump('买车')">
                <span class="icon iconfont icon-maiche"></span>
                <div class="text-center" >买车</div>
            </div>
            <div class="box text-center" @click="jump('租车')">
                <span class="icon iconfont icon-zuche"></span>
                <div class="text-center">租车</div>
            </div>
            <div class="box text-center" @click="jump('卖车')">
                <span class="icon iconfont icon-iconfontzhizuobiaozhun023121"></span>
                <div class="text-center" >卖车</div>
            </div>
            <div class="box text-center" @click="jump('我的')">
                <span class="icon iconfont icon-geren"></span>
                <div class="text-center" >我的</div>
            </div>
        </div>
    </div>
    
    <script src="./swiper/js/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>
    
    <script type="text/javascript"> 
        function backForByIcon(data){
            console.log(data)
            if(data === '二手车'){
                window.location.href='./UsedCar.html'
            }else if(data === '估价'){
                window.location.href='./Valuation.html'
            }
        }

        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false ;

        //#region index_box1交互功能
        new Vue({
            el:'#index_box1',
            data(){
                return{
                    seachText:''
                }
            },
            methods:{
                searchFor(){
                    console.log(this.seachText)
                }
            }
        })
        //#endregion

        //#region index_box8交互功能
        new Vue({
            el:'#index_box8',
            data(){
                return{
                    carArrays:[]
                }
            },
            methods:{
                backToCarDetails(puuid){
                    // window.location.href='./carDateaisl.html'
                    // console.log('puid:',puuid)
                    window.location.href=`./carDateaisl.html?puuid=${puuid}&jsonid=0-0`
                }
            },
            mounted(){
                axios.get('./json/data/0-0.json').then(response=>{
                    // console.log(response.data['data']['postList'])
                    this.carArrays = response.data['data']['postList'].map(function(item){
                        // console.log(item)
                        return{
                            clue_id:item.clue_id,
                            puid:item.puid,
                            thumb_img:item.thumb_img,
                            title:item.title,
                            carCount:4.08,
                            carCNY:item.price,
                            first_pay:item.first_pay,
                            rmb_price:JSON.parse(item.service_tracking_info)['price'],
                            license_date:item.license_date
                        }
                    })
                    // console.log(this.carArrays)
                })
            }
        })
        //#endregion

        //#region index_box9交互功能
        new Vue({
            el:"#index_box9",
            methods:{
                jump(context){
                    console.log(context)
                    if(context==='首页'){
                        window.location.href='./index.html'
                    }else if(context==='买车'){
                        window.location.href='./buyCar.html'
                    }else if(context==='租车'){
                        window.location.href='./rentCar.html'
                    }else if(context==='卖车'){
                        // console.log('卖车')
                        window.location.href='./SellCar.html'
                    }else if(context==='我的'){
                        window.location.href='./PersonalCenter.html'
                    }
                }
            }
        })
        //#endregion
    </script>
</body>
</html>